<template>
    <div class="survey-form">
        <van-nav-bar :title="surveyTitle" left-arrow @click-left="onBack" />

        <div class="form-container">
            <div class="form-header">
                <h2>请对本次就医体验进行评价</h2>
                <p>您的反馈对我们很重要</p>
            </div>

            <van-form @submit="onSubmit">
                <!-- 整体满意度 -->
                <van-cell-group inset title="整体满意度">
                    <van-field v-model="formData.overallSatisfaction" label="整体满意度" readonly is-link
                        @click="showOverallPicker = true" placeholder="请选择满意度" />
                </van-cell-group>

                <!-- 服务态度 -->
                <van-cell-group inset title="服务态度">
                    <van-field v-model="formData.serviceAttitude" label="医护人员服务态度" readonly is-link
                        @click="showServicePicker = true" placeholder="请选择满意度" />
                </van-cell-group>

                <!-- 医疗技术 -->
                <van-cell-group inset title="医疗技术">
                    <van-field v-model="formData.medicalSkill" label="医疗技术水平" readonly is-link
                        @click="showMedicalPicker = true" placeholder="请选择满意度" />
                </van-cell-group>

                <!-- 就医环境 -->
                <van-cell-group inset title="就医环境">
                    <van-field v-model="formData.environment" label="就医环境" readonly is-link
                        @click="showEnvironmentPicker = true" placeholder="请选择满意度" />
                </van-cell-group>

                <!-- 意见建议 -->
                <van-cell-group inset title="意见建议">
                    <van-field v-model="formData.suggestion" label="意见建议" type="textarea" placeholder="请输入您的意见建议（选填）"
                        rows="4" maxlength="200" show-word-limit />
                </van-cell-group>

                <!-- 提交按钮 -->
                <div class="submit-section">
                    <van-button type="primary" size="large" block round native-type="submit" :loading="submitting">
                        提交评价
                    </van-button>
                </div>
            </van-form>
        </div>

        <!-- 满意度选择器 -->
        <van-popup v-model:show="showOverallPicker" position="bottom">
            <van-picker :columns="satisfactionOptions" @confirm="onOverallConfirm" @cancel="showOverallPicker = false"
                title="选择整体满意度" />
        </van-popup>

        <van-popup v-model:show="showServicePicker" position="bottom">
            <van-picker :columns="satisfactionOptions" @confirm="onServiceConfirm" @cancel="showServicePicker = false"
                title="选择服务态度满意度" />
        </van-popup>

        <van-popup v-model:show="showMedicalPicker" position="bottom">
            <van-picker :columns="satisfactionOptions" @confirm="onMedicalConfirm" @cancel="showMedicalPicker = false"
                title="选择医疗技术满意度" />
        </van-popup>

        <van-popup v-model:show="showEnvironmentPicker" position="bottom">
            <van-picker :columns="satisfactionOptions" @confirm="onEnvironmentConfirm"
                @cancel="showEnvironmentPicker = false" title="选择就医环境满意度" />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showToast, showSuccessToast } from 'vant';

const router = useRouter();
const route = useRoute();

// 表单数据
const formData = reactive({
    overallSatisfaction: '',
    serviceAttitude: '',
    medicalSkill: '',
    environment: '',
    suggestion: ''
});

// 满意度选项
const satisfactionOptions = [
    '非常满意',
    '满意',
    '一般',
    '不满意',
    '非常不满意'
];

// 弹窗控制
const showOverallPicker = ref(false);
const showServicePicker = ref(false);
const showMedicalPicker = ref(false);
const showEnvironmentPicker = ref(false);

// 提交状态
const submitting = ref(false);

// 调查类型和标题
const surveyType = ref('');
const surveyTitle = ref('满意度评价');

onMounted(() => {
    // 从URL参数获取调查类型
    const type = route.query.type as string;
    surveyType.value = type;

    // 根据类型设置标题
    switch (type) {
        case 'outpatient':
            surveyTitle.value = '门诊满意度评价';
            break;
        case 'inpatient':
            surveyTitle.value = '住院满意度评价';
            break;
        case 'environment':
            surveyTitle.value = '医院环境满意度评价';
            break;
        default:
            surveyTitle.value = '满意度评价';
    }
});

const onBack = () => {
    router.back();
};

// 选择器确认事件
const onOverallConfirm = (value: string) => {
    formData.overallSatisfaction = value;
    showOverallPicker.value = false;
};

const onServiceConfirm = (value: string) => {
    formData.serviceAttitude = value;
    showServicePicker.value = false;
};

const onMedicalConfirm = (value: string) => {
    formData.medicalSkill = value;
    showMedicalPicker.value = false;
};

const onEnvironmentConfirm = (value: string) => {
    formData.environment = value;
    showEnvironmentPicker.value = false;
};

// 提交表单
const onSubmit = async () => {
    // 验证必填项
    if (!formData.overallSatisfaction) {
        showToast('请选择整体满意度');
        return;
    }
    if (!formData.serviceAttitude) {
        showToast('请选择服务态度满意度');
        return;
    }
    if (!formData.medicalSkill) {
        showToast('请选择医疗技术满意度');
        return;
    }
    if (!formData.environment) {
        showToast('请选择就医环境满意度');
        return;
    }

    submitting.value = true;

    try {
        // 模拟提交
        await new Promise(resolve => setTimeout(resolve, 1000));

        showSuccessToast('评价提交成功！');

        // 延迟返回上一页
        setTimeout(() => {
            router.back();
        }, 1500);

    } catch (error) {
        showToast('提交失败，请重试');
    } finally {
        submitting.value = false;
    }
};
</script>

<style scoped>
.survey-form {
    min-height: 100vh;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
}

.form-container {
    flex: 1;
    padding: 16px;
}

.form-header {
    text-align: center;
    margin-bottom: 24px;
    padding: 20px 0;
}

.form-header h2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.form-header p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.submit-section {
    margin-top: 32px;
    padding: 0 16px;
}

:deep(.van-cell-group__title) {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 16px 16px 8px 16px;
}

:deep(.van-field__label) {
    font-size: 15px;
    color: #333;
}

:deep(.van-field__control) {
    font-size: 15px;
}

:deep(.van-button--primary) {
    background: linear-gradient(135deg, #338aff 0%, #5b9cff 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(51, 138, 255, 0.3);
    height: 48px;
    font-size: 18px;
    font-weight: 500;
}

:deep(.van-button--primary:active) {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(51, 138, 255, 0.3);
}
</style>